<script setup>
import { titleData } from '../js/pageDate.js'
import { ref, onMounted, nextTick, watch } from 'vue'
import { mainStore } from '@/store/mainStore.js'
import TableMore from './TableMore.vue'

let showBtnBox = ref(false)

const store = mainStore()
const showTitleData = ref(titleData)

const updataTable = () => {
  columns.value = titleData.filter((item) => item.show)
}

const columns = ref()
columns.value = titleData.filter((item) => item.show)

const changeTitleDate = (id) => {
  showTitleData.value.forEach((item) => {
    if (item.id === id) {
      item.show = false
    }
  })
  updataTable()
}

let height = ref(0)
onMounted(() => {
  nextTick(() => {
    const container = document.querySelector('.tableList').getBoundingClientRect()
    height.value = container.height - 100 + 'px'
  })
})
</script>

<template>
  <div class="showList-container">
    <p style="margin-bottom: 10px">感知目标信息</p>

    <!-- 底部信息体 -->
    <div class="showMain">
      <div class="titleBtn">
        <!-- 左边显示区域 -->
        <div class="titleBtn_left">
          <div class="item" v-for="item in showTitleData.filter((item) => item.show)" :key="item.id">
            <p>{{ item.title }}</p>
            <img src="/public/global/close_1.png" @click="changeTitleDate(item.id)" />
          </div>
        </div>

        <!-- 右边显示按钮 -->
        <div :class="[showBtnBox ? 'up' : '', 'showBtn']" @click="showBtnBox = !showBtnBox">
          <img src="/public/global/showDown.png" />
        </div>
      </div>

      <div class="showBtnBox showCheckbox" v-show="showBtnBox">
        <el-checkbox v-for="item in showTitleData" :key="item.id" v-model="item.show" :label="item.title" @change="updataTable" />
      </div>

      <div class="showTableEle">
        <TableMore :columns="columns" class="tableData" :height="height" />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import url('../css/showList.less');
</style>
